<template>
    <section>
        <el-col :span="24">
            <el-form inline>
                <el-form-item>
                    <el-input v-model.trim="form.type_no" placeholder="商品编码" size="small" style="width: 160px" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model.trim="form.sku_code" placeholder="规格编码" size="small" style="width: 160px" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model.trim="form.product_name" placeholder="商品规格名称" size="small" style="width: 130px" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model.trim="form.a_parts" placeholder="部件" size="small" style="width: 130px" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select size="small" v-model="form.is_subject" style="width: 120px">
                        <el-option value="kz" label="十三余"></el-option>
                        <el-option value="mz" label="十三余(童装)"></el-option>
                        <el-option value="yx" label="有香"></el-option>
                        <el-option value="xm" label="一弦一木"></el-option>
                        <el-option value="js" label="锦瑟"></el-option>
                        <el-option value="qyx" label="七月夕"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="el-icon-search" @click="searchBtn" size="small" :loading="btnLoading">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="24">
            <el-table :data="data" style="width: 100%" :max-height="tableHeight" v-loading="loading" size="mini">
                <el-table-column label="图片" align="center" prop="img" width="50">
                    <template slot-scope="{ row }">
                        <el-image :src="row.img" fit="contian" :preview-src-list="[row.img]">
                            <div slot="error" class="image-slot">
                                <svg t="1718681716906" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2623" width="20" height="20"><path d="M400.696 268.795c-17.249 0-31.233 13.986-31.233 31.233v30.471c0 17.249 13.986 31.233 31.233 31.233s31.233-13.986 31.233-31.233v-30.471c0-17.249-13.985-31.233-31.233-31.233z" fill="#999999" p-id="2624"></path><path d="M623.649 361.734c17.249 0 31.234-13.986 31.234-31.233v-30.471c0-17.249-13.986-31.233-31.234-31.233s-31.233 13.986-31.233 31.233v30.471c-0.001 17.248 13.985 31.233 31.233 31.233z" fill="#999999" p-id="2625"></path><path d="M438.295 388.804c-14.656 9.104-19.155 28.362-10.050 43.013 11.209 18.047 41.976 48.59 86.157 48.59 43.958 0 75.1-30.313 86.574-48.223 9.303-14.529 5.068-33.847-9.455-43.15-14.539-9.298-33.852-5.068-43.15 9.455-0.122 0.199-13.38 19.45-33.969 19.45-20.009 0-32.444-18.128-33.278-19.373-9.166-14.423-28.28-18.805-42.829-9.761z" fill="#999999" p-id="2626"></path><path d="M824.508503 116.690676 571.592236 116.690676c-17.248849 0-31.233352 13.985526-31.233352 31.233352s13.985526 31.233352 31.233352 31.233352l252.916267 0c40.181141 0 72.878844 32.692586 72.878844 72.878844l0 396.966057-189.334159-165.29465c-12.20088-10.655687-30.517037-10.207479-42.173518 0.9967L468.578048 674.16231 309.521472 517.519714c-11.895935-11.70253-30.903847-12.002358-43.154869-0.645706L126.957507 646.163629l0-394.126382c0-40.186258 32.692586-72.878844 72.878844-72.878844l252.916267 0c17.248849 0 31.233352-13.985526 31.233352-31.233352S470.000444 116.690676 452.751594 116.690676L199.836351 116.690676c-74.632791 0-135.346571 60.71378-135.346571 135.346571l0 520.56405c0 74.632791 60.71378 135.346571 135.346571 135.346571l252.916267 0c17.248849 0 31.233352-13.985526 31.233352-31.233352s-13.985526-31.233352-31.233352-31.233352L199.836351 845.481164c-40.186258 0-72.878844-32.692586-72.878844-72.878844l0-41.23924 160.003134-148.385539 159.428036 157.007917c12.048407 11.865235 31.361265 11.981892 43.546795 0.274246l198.576661-190.68697 208.876238 182.346001 0 40.683585c0 40.186258-32.697703 72.878844-72.878844 72.878844L571.592236 845.481164c-17.248849 0-31.233352 13.985526-31.233352 31.233352s13.985526 31.233352 31.233352 31.233352l252.916267 0c74.627674 0 135.346571-60.71378 135.346571-135.346571L959.855074 252.037247C959.855074 177.404456 899.136178 116.690676 824.508503 116.690676z" fill="#999999" p-id="2627"></path></svg>
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column label="商品编码" align="center" prop="type_no"></el-table-column>
                <el-table-column label="规格编码" align="center" prop="product_code"></el-table-column>
                <el-table-column label="商品规格名称" align="center" prop="product_name" show-overflow-tooltip></el-table-column>
                <el-table-column label="部件" align="center" prop="a_parts"></el-table-column>
                <el-table-column label="商品分类" align="center" prop="commodity_classification"></el-table-column>
                <el-table-column label="销售价" align="center" prop="selling_price"></el-table-column>
                <el-table-column label="吊牌价" align="center" prop="tag_price"></el-table-column>
                <el-table-column label="成本价" align="center" prop="cost_price"></el-table-column>
                <el-table-column label="库存" align="center" prop="num">
                    <template slot-scope="{ row }">
                        <span style="font-weight: bold" :style="{ color: row.num > 0 ? 'red' : '#67C23A' }">{{ row.num || 0 }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="可销数" align="center" prop="use_num">
                    <template slot-scope="{ row }">
                        <span style="font-weight: bold" :style="{ color: row.use_num > 0 ? 'red' : '#67C23A' }">{{ row.use_num || 0 }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="在途数" align="center" prop="qty">
                    <template slot-scope="{ row }">
                        <span style="font-weight: bold" :style="{ color: row.qty > 0 ? 'red' : '#67C23A' }">{{ row.qty || 0 }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <!--翻页栏-->
            <div style="margin-top: 4px;overflow: hidden;float: right;">
                <Page :total="total" :current="page" :page-size="limit" show-total @on-change="pageChange"></Page>
            </div>
        </el-col>
    </section>
</template>

<script>
import {juyiList} from "@/api/oms/juyi";

export default {
    name: "om_itemInfo",
    data() {
        return {
            tableHeight: window.innerHeight - 210,
            selectIndex: 0,
            btnLoading: false,
            loading: false,
            page: 1,
            limit: 20,
            total: 0,
            data: [],
            user: {},
            nodeActions: [],

            form: {type_no: "",sku_code: "", product_name: "", a_parts: "", is_subject: "kz"},

        }
    },
    created() {
        this.user = this.$store.getters.user;
        this.nodeActions = this.user.node_actions[this.$route.meta.id] ? this.user.node_actions[this.$route.meta.id] : [];
    },
    methods: {
        //搜索按钮
        searchBtn() {
            this.page = 1;
            this.getData();
        },
        //翻页
        pageChange(page) {
            this.page = page;
            this.getData();
        },
        //获取数据
        getData() {
            if(!this.form.type_no && !this.form.sku_code && !this.form.product_name && !this.form.a_parts){
                this.$message.warning("至少选择一个条件");return;
            }
            let param = {
                page: this.page,
                limit: this.limit,
                is_subject: this.form.is_subject
            };
            param = Object.assign(param, this.form);
            this.loading = true;
            juyiList(param).then((res) => {
                this.loading = false;
                this.total = res.data.total;
                this.data = res.data.data;
            }).catch(() => {
                this.loading = false;
            });
        },
    },
    mounted() {

    }
}
</script>

<style scoped>

</style>
